<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>HC账号登陆</title>
	<link rel="stylesheet" type="text/css" href="public/css/login.css" />
	<link rel="stylesheet" type="text/css" href="public/css/loginstyle.css" />
	<link rel="stylesheet" href="public/css/logins.css">
	<link rel="stylesheet" href="public/layui/css/layui.css">
	<script src="public/layui/layui.all.js"></script>
	<script src="public/js/jquery-1.11.1.min.js"></script>
</head>

<body>
	<style>
		.verify {
			display: inline-block;
			height: 30px;
			width: 38%;
			margin-top: 0;
			border-radius: 3px;
			margin-left: -45px;
			margin-right: 33px;
			cursor: pointer;
		}

		.verify_box input {
			width: 60%;
		}
	</style>
	<div class="jq22-container" style="padding-top:100px">
		<div class="login-wrap">
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" checked>
				<label for="tab-1" class="tab">登录</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
				<div class="login-form">
					<form id="dl">
						<div class="sign-in-htm">
							<div class="group">
								<label for="user" class="label">用户名</label>
								<input id="username" name="username" type="text" class="input">
							</div>
							<div class="group">
								<label for="pass" class="label">密码</label>
								<input id="password" type="password" name="password" class="input" data-type="password">
							</div>
							<div class="group">
								<div class="container">
									<div id="captcha" style="position: relative" data-type="password"></div>
									<div id="msg"></div>
								</div>
							</div>

							<div class="login-center clearfix verify_box" style='margin-bottom: 30px;margin-top: 30px;'>
								<div class="login-center-input">
									<input type="text" name="verify" value="" placeholder="请输入您的验证码"
										onfocus="this.placeholder='';this.value=''"
										onblur="this.placeholder='请输入您的验证码'" />
									<div class="login-center-input-text">验证码</div>
									<!-- 这里是验证码 -->
									<div class="login-center-img verify"><img src="/svg"
											onclick="this.src='/svg?'+Math.random()" style="height: 40px;"  id="verify"></div>
								</div>
							</div>

							<div class="group">
								<input id="check" type="checkbox" class="check" checked>
								<label for="check"><span class="icon"></span> 保持登录</label>
							</div>
							<div class="group">
								<input type="submit" class="button" value="登录">
							</div>
							<div class="hr"></div>
						</div>
					</form>
					<form id="register">
						<div class="sign-up-htm">
							<div class="group">
								<label for="user" class="label">用户名</label>
								<input id="users" type="text" class="input" name="name" minlength="4"
									placeholder="至少4位字符">
							</div>
							<div class="group">
								<label for="pass" class="label">密码</label>
								<input id="passs" type="password" class="input" data-type="password" minlength="4"
									name="pass" placeholder="至少4位字符">
							</div>
							<div class="group">
								<label for="pass" class="label">重复密码</label>
								<input id="passs" type="password" class="input" data-type="password" name="repass">
							</div>
							<div class="group">
								<label for="pass" class="label">邮箱地址</label>
								<input id="pass" type="email" class="input" name="email">
							</div>
							<div class="group">
								<a href="../register.html"><input type="submit" class="button" value="注册"></a>
							</div>
							
							<div class="hr"></div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script>
		$('#dl').on('submit', function (event) {
			event.preventDefault();
			if (!$(this).serializeArray()[0].value) {
				layer.msg('用户名不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			if (!$(this).serializeArray()[1].value) {
				layer.msg('密码不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			if (!$(this).serializeArray()[2].value) {
				layer.msg('验证码不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			var ii = layer.load(1);
			$.ajax({
				type: "post",
				url: "/api/login",
				data: $(this).serializeArray(),
				success: function (res) {
					if (res.flog == 1) {
						window.location.href='/index';
						layer.close(ii);
					} else {
						layer.msg('登录失败，请重新输入信息!', { icon: 5, time: 1000 });
					}
					var base = '/svg';
					$('#verify').attr('src',base + '?' + Math.random());
					layer.close(ii);
				},
				error: function (err) {
					layer.msg('程序异常!', { icon: 5, time: 1000 });
					$('#verify').attr('src',base + '?' + Math.random());
				}
			});
		});
		$("#register").on('submit', function () {
			event.preventDefault();
			if (!$(this).serializeArray()[0].value) {
				layer.msg('用户名不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			if (!$(this).serializeArray()[1].value) {
				layer.msg('密码不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			if (!$(this).serializeArray()[2].value) {
				layer.msg('确认密码不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			if (!$(this).serializeArray()[3].value) {
				layer.msg('邮箱地址不能为空!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			if ($(this).serializeArray()[2].value != $(this).serializeArray()[1].value) {
				layer.msg('输入的两次密码不一样!', { icon: 5, time: 1000, offset: '550px', anim: 6 });
				return;
			}
			var ii = layer.load(1);
			$.ajax({
				type: "post",
				url: "/api/register",
				data: $(this).serializeArray(),
				success: function (res) {
					if (res.flog) {
						location.href = "/index"
						layer.close(ii);
					} else {
						layer.msg(res.data, { icon: 5, time: 1000 });
					}
					layer.close(ii);
				},
				error: function (err) {
					layer.msg('程序异常!', { icon: 5, time: 1000 });
				}
			});
		})

		
	</script>
</body>

</html>